<template>
  <view class="search-com-page" :style="state.style">
    <image
      class="page-bg-image"
      v-if="props.image"
      :src="props.image"
      mode="widthFix"
    />
    <view class="page-bg-color" :style="props.bgObj"></view>
    <ttStatusBar v-if="showStatusBar" />
    <view
      class="search-wrap"
      v-if="!props.showBack"
      :style="state.searchWrapStyle"
    >
      <view
        v-if="props.showBack"
        class="iconfont icon-back"
        @click.stop="proxy.$utils.goBack()"
      ></view>
      <view
        class="search-box"
        :style="state.searchBoxStyle"
        @click="proxy.$utils.goHerf(`${props.src}`)"
      >
        <view class="iconfont icon-search"></view>
        <view class="txt">{{ props.text }}</view>
      </view>
    </view>
    <searchInput v-else :showBack="props.showBack" @search="search" />
  </view>
</template>
<script setup lang="ts">
import {
  reactive,
  getCurrentInstance,
  onMounted,
  defineProps,
  nextTick,
} from "vue";
import searchInput from "./components/search-input.vue";
import ttStatusBar from "@/components/tt-status-bar.vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
  // 背景图
  image: {
    type: String,
    defult: "",
  },
  bgObj: {
    type: Object,
    defult: {},
  },
  // 背景色
  backgroudColor: {
    type: String,
    default: "transparent",
  },
  // 边框颜色
  border: {
    type: String,
    default: "1px solid #000",
  },
  // 输入框背景色
  inputBgColor: {
    type: String,
    default: "transparent",
  },
  // 跳转链接
  src: {
    type: String,
    default: "",
  },
  // 搜索提示文字
  text: {
    type: String,
    default: "请输入搜索内容",
  },
  // 是否显示状态栏
  showStatusBar: {
    type: Boolean,
    default: true,
  },
  // 是否显示返回键
  showBack: {
    type: Boolean,
    default: false,
  },
  isInput: {
    type: Boolean,
    default: false,
  },
});
const state = reactive({
  style: {},
  searchWrapStyle: {},
  searchBoxStyle: {},
  month: "",
});
onMounted(() => {
  handleStyle();
});
/**
 * 功能方法
 */
const handleStyle = () => {
  const systemMenuBtn = proxy.$config.systemMenuBtn();
  const systemInfo = proxy.$config.systemInfo();
  nextTick(() => {
    state.style = {
      "background-color": `${props.backgroudColor}`,
    };
    const backWidth = props.showBack ? proxy.$utils.rpx2px(50) : 0;
    state.searchWrapStyle = {
      // #ifdef MP-WEIXIN
      height: `${systemMenuBtn.height}px`,

      // #endif
    };
    state.searchBoxStyle = {
      // #ifdef MP-WEIXIN
      width: `calc(100vw - ${
        systemMenuBtn.width +
        (systemInfo.screenWidth - systemMenuBtn.right) +
        proxy.$utils.rpx2px(60) +
        backWidth
      }px )`,
      // #endif
      "background-color": props.inputBgColor,
      border: `${props.border}`,
    };
  });
};

const search = (content: any) => {
  console.log(content);
};

/**
 * 父组件方法
 */
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.search-com-page {
  .page-bg-image {
    position: absolute;
    width: 100vw;
    top: 0;
    left: 0;
  }
  .page-bg-color {
    position: absolute;
    width: 750rpx;
    top: 0;
    left: 0;
  }
  .search-wrap {
    display: flex;
    width: 100%;
    align-items: center;
    .icon-back {
      height: 60rpx;
      margin-left: 30rpx;
      display: flex;
      font-size: 34rpx;
      justify-content: center;
      align-items: center;
    }
    .search-box {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 60rpx;
      margin: 30rpx;
      box-sizing: border-box;
      border-radius: 100rpx;
      .icon-search {
        font-size: 26rpx;
        margin-left: 30rpx;
        color: var(--gray-color);
      }
      .txt {
        font-size: 26rpx;
        margin-left: 19rpx;
        color: var(--gray-color);
      }
    }
    // #ifdef MP-WEIXIN
    .search-box {
      margin: 0 30rpx;
    }
    // #endif
  }
}
</style>
